<template>
  <div style="height: 523px;overflow: hidden;background: white;border: 1px solid white; border-radius: 12px; margin-top: 10px ">
    
    <el-button style="position: absolute; right: 26px; top:15px;" type="primary" size="mini"
      @click=" dialog = true " round>库房查询</el-button>
    <div style="background-color: white; height: 20px; text-align: left; padding: 10px; margin-top: 15px;">
      <h4>符合条件的产品种类7例 </h4>
    </div>
    <div style="background-color: #E9EEF3; height: 400px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100% " size="mini">
          <el-table-column prop="reprkdbh" label="入库单编号" width="220">
          </el-table-column>
          <el-table-column prop="repcpmc" label="产品名称" width="100">
          </el-table-column>
          <el-table-column prop="repIjfl" label="I级分类" width="100">
          </el-table-column>
          <el-table-column prop="repIIjfl" label="II级分类" width="100">
          </el-table-column>
          <el-table-column prop="repcrxq" label="产品描述" width="100">
          </el-table-column>
          <el-table-column prop="reprkxj" label="入库小计" width="100">
          </el-table-column>
          <el-table-column prop="repckxj" label="出库小计" width="100">
          </el-table-column>
          <el-table-column prop="repqmkc" label="期末库存" width="100">
          </el-table-column>
          <el-table-column label="入库调度" width="100">
            <template solt-scope="scope">
              <el-button size="mini" round>入库调度</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block" style="position: absolute; bottom: 65px; margin-left:250px ;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="14"
          :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>
    <el-drawer title="入库查询" :before-close="handleClose" :visible.sync="dialog" direction="rtl"
      custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth" >
            <el-input v-model="form.name" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域" size="mini" height="500px">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
            {{ loading ? '提交中 ...' : '确 定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  export default {
    name: 'repoutsh',
    data() {
      return {
        table: false,
        dialog: false,
        loading: false,
        tableData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      formLabelWidth: '80px',
      timer: null
      }
    },	mounted(){
			this.$http.post("selRepchurukudontai")
			.then((res) => {	
						this.tableData=res.data;	 
					})
					.catch((err) => { //请求失败
				console.log(err);
			}); 
		}
		,
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);

      }
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }
</style>
